<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>Hello World</h1>

    <button id="btn1">选择图片</button>

    <br />

    <button id="btn2">开始录音</button>

    <br />
    <button id="btn3">结束录音</button>

    <br />
    <button id="btn4">Jump C</button>

    <img id="img" style="width: 100%; height: 100px" />

    <!-- 引入 JSSDK 类库 -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

    <script>
      console.log(navigator.userAgent, "=====");

      function init() {
        const url = window.location.href.split("#")[0];
        fetch(`/getMpConfig?url=${url}`)
          .then((response) => response.json())
          .then((result) => {
            console.log("result", result);

            // wx.config
            wx.config({
              ...result,
              // 必填，需要使用的JS接口列表
              jsApiList: [
                "chooseImage",
                "startRecord",
                "stopRecord",
                "playVoice",
              ], //
            });
          });
      }

      window.onload = function () {
        init();

        wx.ready(() => {
          // config 配置完成
          console.log("jssdk配置都ok");

          btn1.onclick = function () {
            // alert(1);
            wx.chooseImage({
              count: 1, // 默认9
              sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
              sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
              success: function (res) {
                var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                console.log("localIds", localIds);

                document.querySelector("#img").setAttribute("src", localIds[0]);
              },
            });
          };

          btn2.onclick = function () {
            wx.startRecord();
          };

          btn3.onclick = function () {
            wx.stopRecord({
              success: function (res) {
                var localId = res.localId;

                // 立即播放
                wx.playVoice({
                  localId, // 需要播放的音频的本地ID，由stopRecord接口获得
                });
              },
            });
          };

          btn4.onclick = function () {
            wx.miniProgram.navigateTo({
              url: "/pages/page-c/index",
            });
          };
        });
      };
    </script>
  </body>
</html>
